import React, { PureComponent } from 'react';
import './table.less';
import { DatePicker, Select, Input, InputNumber, Modal, Button } from 'antd';
import tableMain from './tableDataEdit';
import moment from 'moment';
const { MonthPicker, RangePicker } = DatePicker;
const { Option } = Select;
const { TextArea } = Input;


export default class Table extends PureComponent {
    constructor (props) {
        super(props)
        this.state = {
            tableIndex:0,
            index:0,
            item:[],
            popDom:'',
            isModalVisible:false,
            tableMain:tableMain
        }
    }
    trDom(tableIndex,item,index){
        let dom = "";
        // 下拉框+输入框弹窗 start
        if(item.type === "select"){
            return (
                <tr onClick={() => this.getRowInfo(tableIndex,item,index)}>
                    <td>
                        <div className="editHieht">
                            <Select defaultValue={item.value} style={{ width: 120 }} onChange={(e)=>this.selectMultipleChange(e)}>
                                {item.options.map((oItem,optionIndex) => {
                                    return (
                                        <Option value={oItem.value} key={optionIndex}>{oItem.name}</Option>
                                    )
                                })}
                            </Select>
                        </div>
                    </td>
                </tr>
            )
        }
        // 数字输入框 start
        if(item.type === "textNumber"){
            return (
                <tr onClick={() => this.getRowInfo(tableIndex,item,index)}>
                    <td>
                        <div className="editHieht">
                            {item.rules?
                            <InputNumber min={item.rules.min} max={item.rules.max} defaultValue={item.value} onChange={(e)=>this.inputNumberChange(e)} />:
                            <InputNumber defaultValue={item.value} onChange={(e)=>this.inputNumberChange(e)} />}

                        </div>
                    </td>
                </tr>
            )
        }
        // 普通文本输入框 start
        if(item.type === "text"){
            return (
                <tr onClick={() => this.getRowInfo(tableIndex,item,index)}>
                    <td>
                        <div className="editHieht"><TextArea placeholder="Autosize height based on content lines" value = {item.value} onChange ={e => this.inputChange(e)} row={1} /></div>
                    </td>
                </tr>
            )
        }
        // 日期选择 start
        if(item.type === "dataTime"){
            const dateFormat = 'YYYY-MM-DD';
            return (
                <tr onClick={() => this.getRowInfo(tableIndex,item,index)}>
                    <td>
                        <div className="editHieht">
                            <DatePicker defaultValue={moment(item.value, dateFormat)} onChange={this.dataChange.bind(this)} />
                        </div>
                    </td>
                </tr>
            )
        }
        // 数字+下拉单位 start
        if(item.type === "textNumber-slect"){
            return (
                <tr onClick={() => this.getRowInfo(tableIndex,item,index)}>
                    <td>
                        <div className="editHieht textNumber-slect">
                            <InputNumber min={item.rules.min} max={item.rules.max} defaultValue={item.value} onChange={(e)=>this.inputNumberChange(e)} />
                            <Select defaultValue={item.unit.value} style={{ width: 120 }} onChange={(e)=>this.selectUnitChange(e)}>
                                {item.unit.options.map((oItem,optionIndex) => {
                                    return (
                                        <Option value={oItem.value}>{oItem.name}</Option>
                                    )
                                })}
                            </Select>
                        </div>
                    </td>
                </tr>
            )
        }
        return (
            <tr key={index}>
                <td><div className="editHieht">asdfasdf</div></td>
            </tr>
        )
    }
    showModal(){
        this.setState({
            isModalVisible:true
        })
    }
    handleOk () {
        this.setState({
            isModalVisible:false
        })
    }
    handleCancel() {
        this.setState({
            isModalVisible:false
        })
    }
    // 获取当前行信息
    getRowInfo(tableIndex,item,index){
        this.setState({
            tableIndex:tableIndex,
            index:index,
            item:item
        })
        console.log(11111,tableIndex,index)
    }
    // 下拉+弹窗赋值
    selectMultipleChange(value){
        let main = this.state.tableMain
        let popData = main[this.state.tableIndex][this.state.index].options
        main[this.state.tableIndex][this.state.index].value = value
        let data = ''
        for(let i in popData){
            if(value === popData[i].value){
                data = popData[i].children
            }
        }
        if(data && data.length>0){
            this.setState({
                popDom:data
            })
            this.showModal()
        }
        this.setState({
            tableMain:[...main]
        })
        console.log('666selectMultipleChange',this.state.tableMain)
    }
    // inputNumber输入框赋值
    inputNumberChange(value){
        let main = this.state.tableMain
        main[this.state.tableIndex][this.state.index].value = value
        this.setState({
            tableMain:[...main]
        })
        console.log(666,this.state.tableMain)
    }
    // 普通input输入框赋值
    inputChange(e){
        let main = this.state.tableMain
        main[this.state.tableIndex][this.state.index].value = e.target.value
        this.setState({
            tableMain:[...main]
        })
        console.log(666,this.state.tableMain)
    }
    // 日期选择框
    dataChange(date,datas) {
        console.log(date,datas);
        let main = this.state.tableMain
        main[this.state.tableIndex][this.state.index].value = datas
        this.setState({
            tableMain:[...main]
        })
        console.log(666,this.state.tableMain)
    }
    // 数字+单位下拉
    selectUnitChange(value){
        let main = this.state.tableMain
        main[this.state.tableIndex][this.state.index].unit.value = value
        this.setState({
            tableMain:[...main]
        })
        console.log(666,this.state.tableMain)
    }
    // 弹窗input输入框赋值
    inputChangePop(e){
        let main = this.state.tableMain
        let popData = this.state.popDom
        const optionItem = main[this.state.tableIndex][this.state.index].options
        let optionChildrenIndex = 0
        let optionIndex = 0
        for(let i in optionItem){
            if(optionItem[i].children && optionItem[i].children.length>0){
                let childrenItem = optionItem[i].children
                for(let y in childrenItem){
                    if(childrenItem[y].id === e.target.id){
                        optionIndex = i
                        optionChildrenIndex = y
                        break;
                    }
                }
            }
        }
        for(let i in popData){
            if(e.target.id === popData[i].id){
                main[this.state.tableIndex][this.state.index].options[optionIndex].children[optionChildrenIndex].value = e.target.value
            }
        }
        this.setState({
            tableMain:[...main]
        })
        console.log(666,this.state.tableMain)
    }

    tableDom(){
        return (
            <div>
                {this.state.tableMain.map((tableList,tableListindex) => {
                    return (
                        <table className="tableName" key={tableListindex}>
                            <tbody>
                                {tableList.map((item,itemIndex) => {
                                    return (
                                        this.trDom(tableListindex,item,itemIndex)
                                    )
                                })}
                            </tbody>
                        </table>
                    )
                })}
                <div className="clear"></div>
            </div>
        )
    }
    popDom(){
        let data = this.state.popDom
        console.log(100,data)
        if(data && data[0].type === "inputText"){
            return (
                <div>
                    {data.map((item)=>{
                        return (
                            <div className="popList">
                                <span className="popListName">{item.name}</span>
                                <span className="popListContent">
                                    <input
                                        type="text"
                                        className="inputStyle"
                                        placeholder={item.name}
                                        id = {item.id}
                                        value = {item.value}
                                        onChange ={e => this.inputChangePop(e) }
                                    />
                                </span>
                            </div>
                        )
                    })}

                </div>
            )
        }
        return (
            <div>ddd</div>
        )
    }
    render() {
        return (
            <div className="tables">
                {this.tableDom()}
                <div>
                    <Modal
                        title="Basic Modal"
                        visible={this.state.isModalVisible}
                        onOk={() => this.handleOk()}
                        onCancel={() => this.handleCancel()}
                    >
                        <div>
                            {this.popDom()}
                        </div>
                    </Modal>
                </div>
            </div>
        );
    }
}
